<template>
  <el-row style="min-width: 1500px">
    <el-col :span="24">
      <div class="publish_box">
        <div class="wrap_head x-flex x-row-between">
          <div class="wrap_head--title x-flex">
            <text class="-name">名称：</text>
            <text class="-text" v-if="!isNameShow">{{ publishName }}</text>
            <el-input
              v-show="isNameShow"
              v-model="publishName"
              class="x-flex1"
              @change="isNameShow = false"
              @keyup.enter.stop.native="isNameShow = false"
              @click.stop
            />
            <el-icon
              v-if="!isNameShow"
              style="cursor: pointer"
              color="#A8ADB2"
              @click="isNameShow = true"
            >
              <EditPen />
            </el-icon>
          </div>
          <div>
            <el-button @click="router.go(-1)">返回上一页</el-button>
            <el-button type="primary" @click="clofing">确认发布</el-button>
          </div>
        </div>
        <div class="wrap_content">
          <div class="wrap_content--equipment_left">
            <div class="x-flex x-row-between --step_tips_title">
              <text>第一步：选择设备</text>
              <div class="x-flex --step_tips_title">
                <text class="-checked_label">交集</text>
                <el-checkbox
                  v-model="checkedIntersection"
                  @click="checkbox"
                  size="large"
                />
              </div>
            </div>
            <div class="--step_tips_first">
              <div class="--step_tips_first-left">
                <div
                  v-if="!listid"
                  v-for="({ icon, name }, index) in tabEqtData"
                  :key="index"
                  :class="[
                    'equipment_type',
                    { eqt_current: index === currenEqt },
                  ]"
                  @click="cutclick((currenEqt = index))"
                >
                  <div>
                    <el-icon>
                      <component :is="icon" />
                    </el-icon>
                  </div>
                  <text>{{ name }}</text>
                </div>
                <div v-else>
                  <div style="margin: 20px 0">
                    <text>全部设备</text>
                  </div>
                </div>
              </div>
              <div class="--step_tips_first-right x-flex1">
                <el-empty
                  v-if="false"
                  style="margin-top: 60px"
                  description="暂无资源"
                />
                <div>
                  <div v-if="!listid">
                    <div v-show="currenEqt === 0" class="all_first">
                      <div class="all_first--head_search">
                        <el-input
                          v-model="firstSearch"
                          class="w-50 m-2"
                          placeholder="输入用户名"
                          :suffix-icon="Search"
                          @input="inputClicks"
                          clearable
                        />
                      </div>
                      <el-table
                        ref="multipleTableRef"
                        :data="tableList"
                        style="width: 100%"
                        :header-cell-style="{ background: '#F6F7F9' }"
                        height="calc(60vh - 224px)"
                        @selection-change="
                          clectClick((multipleSelection = $event))
                        "
                      >
                        <template #empty>
                          <div class="no-data">
                            <el-empty
                              :image="require('../../assets/nothave.png')"
                              style="margin-top: 30%"
                            >
                            </el-empty>
                          </div>
                        </template>
                        <el-table-column
                          label="编号/名称"
                          show-overflow-tooltip
                        >
                          <template #default="{ row }">
                            <div style="line-height: 18px">
                              <div>
                                <el-text style="max-width: 70%" truncated
                                  >{{ row.deviceNo }}
                                </el-text>
                              </div>
                              <div>
                                <el-text style="max-width: 70%" truncated
                                  >{{ row.deviceName }}
                                </el-text>
                              </div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column label="分辨率">
                          <template #default="{ row }">
                            <span>{{ row.length }}x{{ row.width }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="onlineStatus"
                          label="状态"
                          width="55px"
                        >
                          <template #default="{ row }">
                            <span v-if="row.onlineStatus == 0"> 在线 </span>
                            <span v-else> 离线 </span>
                          </template>
                        </el-table-column>
                        <el-table-column type="selection" width="40" />
                      </el-table>
                      <div class="-pages x-flex">
                        <el-button
                          size="small"
                          @click="
                            current(
                              currentPage > 1 ? currentPage-- : currentPage
                            )
                          "
                        >
                          <el-icon>
                            <ArrowLeft />
                          </el-icon>
                        </el-button>
                        <span class="prev_val"
                          >{{ currentPage }}/{{ totalPage }}页</span
                        >
                        <el-button
                          size="small"
                          @click="
                            openclick(
                              currentPage >= totalPage
                                ? totalPage
                                : currentPage++
                            )
                          "
                        >
                          <el-icon>
                            <ArrowRight />
                          </el-icon>
                        </el-button>
                      </div>
                    </div>
                  </div>

                  <div v-if="listid" class="all_first">
                    <div class="all_first--head_search">
                      <el-input
                        v-model="firstSearch"
                        class="w-50 m-2"
                        placeholder="输入用户名"
                        :suffix-icon="Search"
                        @input="inputClicks"
                        clearable
                      />
                    </div>
                    <el-table
                      ref="multipleTableRef"
                      :data="tableList"
                      style="width: 100%"
                      :header-cell-style="{ background: '#F6F7F9' }"
                      height="calc(60vh - 224px)"
                    >
                      <el-table-column label="编号/名称" show-overflow-tooltip>
                        <template #default="{ row }">
                          <div style="line-height: 18px">
                            <div>
                              <el-text style="max-width: 70%" truncated
                                >{{ row.deviceNo }}
                              </el-text>
                            </div>
                            <div>
                              <el-text style="max-width: 70%" truncated
                                >{{ row.deviceName }}
                              </el-text>
                            </div>
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column label="分辨率">
                        <template #default="{ row }">
                          <span>{{ row.length }}x{{ row.width }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="onlineStatus"
                        label="状态"
                        width="55px"
                      >
                        <template #default="{ row }">
                          <span>{{
                            row.onlineStatus == 0 ? "在线" : "离线"
                          }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div class="-pages x-flex">
                      <el-button
                        size="small"
                        @click="
                          current(currentPage > 1 ? currentPage-- : currentPage)
                        "
                      >
                        <el-icon>
                          <ArrowLeft />
                        </el-icon>
                      </el-button>
                      <span class="prev_val"
                        >{{ currentPage }}/{{ totalPage }}页</span
                      >
                      <el-button
                        size="small"
                        @click="
                          openclick(
                            currentPage >= totalPage ? totalPage : currentPage++
                          )
                        "
                      >
                        <el-icon>
                          <ArrowRight />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                  <div v-if="!listid">
                    <div v-show="currenEqt === 1" class="tree_grouping">
                      <el-tree
                        :data="treeData"
                        @node-click="handleNodeClick($event)"
                        default-expand-all
                      >
                        <template #default="{ node, data }">
                          <div style="width: 100%" class="x-flex x-row-between">
                            <span>{{ node.label }}</span>
                            <span
                              ><el-checkbox
                                v-model="data.isGroupingShow"
                                size="large"
                            /></span>
                          </div>
                        </template>
                      </el-tree>
                    </div>
                  </div>
                  <div v-if="!listid">
                    <div v-show="currenEqt === 2" class="tree_grouping region">
                      <el-tree
                        :data="treeRegionData"
                        :lazy="true"
                        @node-click="handleNodeClicks($event)"
                        :load="loadChildren"
                      >
                        <template #default="{ node, data }">
                          <div
                            style="width: 100%"
                            class="x-flex"
                            @click="data.trShow = !data.trShow"
                          >
                            <el-icon
                              v-if="data.hasChildren"
                              :class="['trIcon', { trExpanded: data.trShow }]"
                            >
                              <CaretRight />
                            </el-icon>
                            <div
                              class="x-flex1 x-row-between x-flex"
                              style="width: 100%"
                            >
                              <span>{{ node.label }}</span>
                              <span
                                ><el-checkbox
                                  v-model="data.isRegionShow"
                                  size="large"
                              /></span>
                            </div>
                          </div>
                        </template>
                      </el-tree>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 添加节目弹框 -->
          <el-dialog v-model="dialogTableVisible" title="选择节目">
            <div style="display: flex">
              <el-select
                v-model="selectValue"
                placeholder="请选择分辨率"
                size="large"
                style="width: 200px"
                clearable
                @clear="clearClick"
              >
                <!-- <el-option label="全部分辨率" value="全部分辨率" /> -->
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click="select(item)"
                />
              </el-select>
              <el-date-picker
                v-model="dateValue"
                @clear="clearTime"
                class="x-m-l-10 x-m-r-10"
                end-placeholder="结束日期"
                size="large"
                start-placeholder="开始日期"
                style="width: 300px"
                type="daterange"
                @change="TimeClcik(dateValue)"
                unlink-panels
              />
              <el-input
                v-model="search"
                :suffix-icon="Search"
                placeholder="输入素材名或用户名"
                size="large"
                style="width: 240px"
                @input="inputClick(search)"
                clearable
              />
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                text-align: center;
                flex-wrap: wrap;
                align-items: center;
                border: 1px solid #ccc;
                /* justify-content: space-evenly; */
                margin: 20px 0;
              "
            >
              <div
                v-for="(item, index) in gridData"
                @click="selectImage(index, item)"
              >
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    margin: 0 8px;
                  "
                >
                  <div>
                    <img
                      :class="{ border: index === selectedIndex }"
                      src="https://kpen.oss-cn-shenzhen.aliyuncs.com/2023516/1684206061047.png"
                      style="width: 134px; height: 134px; margin: 10px 4.5px"
                      alt=""
                    />
                  </div>
                  <sapn
                    class="text-overflow"
                    style="margin: 10px auto; width: 120px"
                  >
                    {{ item.programName }}
                  </sapn>
                </div>
              </div>
            </div>
            <template #footer>
              <div style="display: flex; justify-content: space-between">
                <div class="-pages dialog-footer">
                  <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :total="total"
                    background
                    layout="total, sizes, prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>
                <span class="dialog-footer">
                  <el-button @click="dialogTableVisible = false"
                    >取消</el-button
                  >
                  <el-button type="primary" @click="primary"> 确认 </el-button>
                </span>
              </div>
            </template>
          </el-dialog>
          <div class="wrap_content--equipment_right">
            <div class="x-flex x-row-between">
              <text>第二步：选择节目</text>
              <el-button type="primary" link @click="AddProgram"
                >添加节目
                <el-icon>
                  <CirclePlus />
                </el-icon>
              </el-button>
            </div>
            <div class="table_content">
              <el-table
                :data="tableData"
                :header-cell-style="{ background: '#F6F7F9' }"
                :row-style="{ height: '64px' }"
                height="calc(70vh - 188px)"
                style="width: 100%; z-index: 1"
              >
                <el-table-column prop="id" label="序号" width="80" />
                <el-table-column
                  label="名称"
                  min-width="200"
                  show-overflow-tooltip
                >
                  <template #default="{ row }">
                    <div class="x-flex">
                      <el-image
                        v-if="tableData"
                        src="https://kpen.oss-cn-shenzhen.aliyuncs.com/2023516/1684206061047.png"
                        fit="contain"
                        lazy
                        style="width: 28px; height: 28px; margin-right: 8px"
                      />
                      <el-text style="max-width: 70%" truncated
                        >{{ row.programName }}
                      </el-text>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="屏类型" width="150">
                  <template #default="{ row }">
                    <div>
                      <span v-if="row.programType == 0"
                        >单屏({{ row.longResolution }}x{{
                          row.wideResolution
                        }})</span
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="大小"
                  property="programSize"
                  width="120"
                />
                <el-table-column
                  label="时间"
                  property="programTime"
                  width="120"
                />
                <el-table-column label="操作" width="150">
                  <template #default="{ row }">
                    <span class="opera x-m-l-30"
                      ><el-icon><Fold /></el-icon
                    ></span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="wrap_plan">
          <div>第三步：播放计划</div>
          <div class="wrap_plan--table x-scroll">
            <VerticalTable :columns="columns" :dataList="dataList">
              <template #name="{ data }">
                <el-radio-group v-model="checkPlay" class="ml-4">
                  <el-radio
                    size="large"
                    v-for="item in data['name']"
                    :key="item.id"
                    :label="item.name"
                    @change="changeClick(item.id)"
                  ></el-radio>
                </el-radio-group>
              </template>
              <template #date="{ data }">
                <el-checkbox-group
                  v-model="checkCycle"
                  @change="changeClicks($event)"
                >
                  <el-checkbox
                    v-for="item in data['date']"
                    :key="item.id"
                    :label="item.name"
                  />
                </el-checkbox-group>
              </template>
              <template #effectiveTime="{ data }">
                <div class="x-flex">
                  <el-date-picker
                    v-model="data.effectiveTime"
                    type="date"
                    placeholder="年/月/日"
                    prefix-icon="none"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabled-date="disabledDate"
                    @change="handleStartTimeChanges"
                  />
                  <span>至</span>
                  <el-date-picker
                    v-model="data.endTime"
                    type="date"
                    placeholder="年/月/日"
                    prefix-icon="none"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabled-date="disabledDate"
                    @change="handleStartTimeChanges"
                  />
                  <el-checkbox
                    class="x-m-l-40"
                    label="全天"
                    v-model="sky"
                    @change="skyCLick"
                  />
                </div>
              </template>
              <template #timePeriod="{ data }">
                <div class="x-flex flex_end">
                  <div>
                    <div v-for="(item, index) in data.timePeriod" :key="index">
                      <el-time-picker
                        v-model="item.timePeriodStart"
                        placeholder="00:00"
                        prefix-icon="none"
                        format="HH:mm"
                        value-format="HH:mm"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        @change="handleStartTimeChange"
                      />
                      <span>至</span>
                      <el-time-picker
                        v-model="item.timePeriodEnd"
                        placeholder="00:00"
                        prefix-icon="none"
                        format="HH:mm"
                        value-format="HH:mm"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        @change="handleEndTimeChange"
                      />
                      <el-button
                        v-if="data.timePeriod.length > 1"
                        text
                        type="info"
                        @click.stop="onDeletTimePeriod(data, index)"
                      >
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                  <div>
                    <el-button
                      text
                      type="primary"
                      @click.stop="onAddTimePeriod(data)"
                    >
                      <el-icon>
                        <Plus />
                      </el-icon>
                      添加时间段
                    </el-button>
                  </div>
                </div>
              </template>
            </VerticalTable>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import {
  EditPen,
  Monitor,
  Search,
  CopyDocument,
  LocationInformation,
  ArrowRight,
  ArrowLeft,
  CirclePlus,
  Delete,
  Fold,
  VideoPlay,
  RefreshRight,
  Calendar,
  AlarmClock,
  Plus,
  CaretRight,
} from "@element-plus/icons-vue";
import { ref, shallowRef, watch, onMounted, reactive, computed } from "vue";
import { storeToRefs } from "pinia";
import VerticalTable from "@/components/VerticalTable.vue";
import { useAdvertising } from "@/store/advertisingRoute";
import {
  devicePages,
  gainGroups,
  getEconomize,
  getSubordinateArea,
} from "../../api/facility/index";
import {
  programGuides,
  openprogram,
  resolutionList,
} from "../../api/advertising/index";
import { useMainStore } from "../../store/main";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
const store = useAdvertising();
const selectValue = ref("");
const dateValue = ref("");
// 选中全天
const sky = ref();
const skyCLick = () => {
  if (sky.value) {
    columns.value.pop();
  } else {
    columns.value.push({
      title: "时间段",
      key: "timePeriod",
      icon: AlarmClock,
    });
  }
};
const formInline = reactive({
  programName: "",
  programType: "",
  programResolution: "",
  programCustom: "", //自定义宽高
  wide: "", //宽
  High: "", //高
});
const { currentComponentName } = storeToRefs(store);
const options = ref([]);
//请求数据
const getResolution = async () => {
  const { data } = await resolutionList();
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  options.value = data.data.map((r: any) => {
    return {
      value: `${r.longResolution}x${r.wideResolution}`,
      label: `${r.longResolution}x${r.wideResolution}`,
    };
  });
};
// 分辨率搜索
const select = (val: any) => {
  let width = val.label.split("x");
  wideResolution.value = width[0];
  longResolution.value = width[1];
  addsEr();
};
const clearClick = () => {
  wideResolution.value = "";
  longResolution.value = "";
  addsEr();
};
// 每页条数
const handleSizeChange = (val: any) => {
  pageSize.value = val;
  addsEr();
};
// 当前页数
const handleCurrentChange = (val: any) => {
  currentPages.value = val;
  addsEr();
};
// 添加节目弹框
var dialogTableVisible = ref(false);
const isNameShow = shallowRef(false);
const now = new Date();
const formattedDate = `AL-${now.getFullYear()}${(now.getMonth() + 1)
  .toString()
  .padStart(2, "0")}${now.getDate().toString().padStart(2, "0")}${now
  .getHours()
  .toString()
  .padStart(2, "0")}${now.getMinutes().toString().padStart(2, "0")}${now
  .getSeconds()
  .toString()
  .padStart(2, "0")}`;
const publishName = ref(formattedDate);
import { convertData, convertDatad } from "@/utils/list";
import { Message } from "@icon-park/vue-next";
import router from "@/router";
import { useRouter } from "vue-router";
const checkedIntersection = ref(0);
//第一步
const currenEqt = shallowRef(0);
const cutclick = (index: any) => {
  if (index == 2) {
    getRegions();
  }
};
const tabEqtData = [
  { icon: Monitor, name: "全部设备" },
  {
    icon: CopyDocument,
    name: "设备分组",
  },
  { icon: LocationInformation, name: "地区分组" },
];
//全部设备
const firstSearch = shallowRef("");
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<programMsgTable[]>([]);
const tableList = ref();
const deviceIdLists = ref([]);
const modes = ref();
const programLists = ref([]);
const selectWeeks = ref();
const levelIds = ref("");
const ids = ref("");
const timeSlots = ref();
const startDate = ref();
//分页
const currentPages = ref(1);
const pageSize = ref(10);
const wideResolution = ref("");
const longResolution = ref("");
var total = ref();
var startDates = ref("");
var endDate = ref("");
var keyword = ref("");
var search = ref("");
const gridData = ref();
var isSelected = ref(false);
var indexs = ref();
var deviceIdListd = ref();
const selectedIndex = ref(-1);
// 选择图片
const selectImage = (index: number, item: any) => {
  if (selectedIndex.value === index) {
    selectedIndex.value = -1;
  } else {
    selectedIndex.value = index;
  }
  indexs.value = item;
};
const primary = () => {
  dialogTableVisible.value = false;
  tableData.value.push(indexs.value);
  programLists.value = tableData.value.map((e) => e.id);
};
// 输入素材或者用户名搜索
const inputClicks = () => {
  keyword.value = search.value;
  devicePagesd();
};
// 选择时间
const TimeClcik = (val: { toISOString: () => string }[]) => {
  if (val) {
    val[0].setUTCDate(val[0].getUTCDate() + 1);

    startDates.value = val[0].toISOString().substr(0, 10) + " 00:00:00";
    val[1].setUTCDate(val[1].getUTCDate() + 1);
    endDate.value = val[1].toISOString().substr(0, 10) + " 23:59:59";
    addsEr();
  } else {
    startDates.value = "";
    endDate.value = "";
    addsEr();
  }
};
const pickerOptions = {
  disabledMinutes: () => ({
    disabledMinutes: [0, 30], // 设置时间只能选择整点和半点
  }),
};
// 日期开始时间不能大于结束时间
const handleStartTimeChanges = () => {
  let add = dataList.value[2].effectiveTime;
  let adds = dataList.value[2].endTime;

  if (add && adds && adds < add) {
    dataList.value[2].effectiveTime = dataList.value[2].endTime;
  } else if (add && adds && add > adds) {
    dataList.value[2].endTime = dataList.value[2].effectiveTime;
  }
};
// 时间段开始时间不能大于结束时间
const handleStartTimeChange = () => {
  let add = dataList.value[3].timePeriod[0].timePeriodStart;
  let adds = dataList.value[3].timePeriod[0].timePeriodEnd;

  if (add && adds > adds) {
    dataList.value[3].timePeriod[0].timePeriodEnd =
      dataList.value[3].timePeriod[0].timePeriodStart;
  } else if (add && adds < add) {
    dataList.value[3].timePeriod[0].timePeriodStart =
      dataList.value[3].timePeriod[0].timePeriodEnd;
  }
};
//  时间段结束不能小于开始
const handleEndTimeChange = () => {
  let add = dataList.value[3].timePeriod[0].timePeriodStart;
  let adds = dataList.value[3].timePeriod[0].timePeriodEnd;

  if (add && adds < add) {
    dataList.value[3].timePeriod[0].timePeriodStart =
      dataList.value[3].timePeriod[0].timePeriodEnd;
  } else if (add && adds > adds) {
    dataList.value[3].timePeriod[0].timePeriodEnd =
      dataList.value[3].timePeriod[0].timePeriodStart;
  }
};
const clearTime = () => {
  startDates.value = "";
  endDate.value = "";
  addsEr();
};
// 添加节目弹框
const AddProgram = async () => {
  dialogTableVisible.value = true;
  addsEr();
};
const addsEr = async () => {
  let data = {
    pageNum: currentPages.value,
    pageSize: pageSize.value,
    wideResolution: wideResolution.value,
    longResolution: longResolution.value,
    startDate: startDates.value,
    endDate: endDate.value,
    keyword: search.value,
    linkGroup: "",
  };

  let res = await openprogram(data);
  if (res.data.code == 1) {
    gridData.value = res.data.data.content;

    total.value = res.data.data.totalElements;
  }
};
// 日期限制选择
const disabledDate = (time: string | number | Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 将时间设置为零时零分零秒
  const endTime = new Date(time);
  // 检查结束日期是否在今天之后
  return endTime < today;
};

// 发布/
const clofing = async () => {
  // 年月日
  let res = dataList.value.map((e) => [e.effectiveTime, e.endTime]);
  startDate.value = res[2];

  //    时间段
  let resd = dataList.value.map((e) => e.timePeriod);
  timeSlots.value = resd[3]?.map(
    (el) => el.timePeriodStart + "-" + el.timePeriodEnd
  );

  let level = [{ levelId: levelIds.value, id: ids.value }];
  let data = {
    programGuidesName: publishName.value, //节目单名称
    intersection: add.value, //是否是交集
    deviceGroupIdList: deviceIdLists.value, //设备分组ID
    deviceIdList: id.value, //设备ID
    mode: modes.value, //模式
    programList: programLists.value, //节目id
    selectWeek: selectWeeks.value ? selectWeeks.value.join() : [], //星期
    startDate: startDate.value[0] + " 00:00:00", //开始时间
    endDate: startDate.value[1] + " 23:59:59", //结束时间
    timeSlot:
      timeSlots.value == "null-null" ? "00:00-23:59" : timeSlots.value.join(), //时间段
    sysRegionList: levelIds.value ? level : [], //地区分组
  };

  let result = await programGuides(data);
  publishName.value = "";
  add.value = 0;
  deviceIdLists.value = [];
  id.value = [];
  modes.value = "";
  programLists.value = [];
  selectWeeks.value = [];
  startDate.value = "";
  startDate.value = "";
  timeSlots.value = "";
  levelIds.value = "";
  if (result.data.code == 1) {
    ElMessage({ message: result.data.msg, type: "success", duration: 1000 });
    router.push("/advertising/advertisingRelease");
    localStorage.removeItem("list");
    localStorage.removeItem("listid");
  } else {
    ElMessage({ message: result.data.msg, type: "error", duration: 1000 });
  }
};
// 播放模式
//分页
const currentPage = ref(1);
const totalPage = ref(20);
const id = ref();
//设备分组
const treeData = ref([]);
//地区分组
const treeRegionData = ref([]);
// 设备分组点击选中
const handleNodeClick = (e: any) => {
  deviceIdLists.value.push(e.value);
  const uniqueArr = deviceIdLists.value.filter((item, index) => {
    return deviceIdLists.value.indexOf(item) === index;
  });
  deviceIdLists.value = uniqueArr;
};

//表格
const tableData = ref([]);

//第三步数据
const checkPlay = ref("");
const checkCycle = ref([]);
var columns = ref([
  {
    title: "播放模式",
    key: "name",
    icon: VideoPlay,
  },
  {
    title: "循环时间",
    key: "date",
    icon: RefreshRight,
  },
  {
    title: "有效时间",
    key: "effectiveTime",
    icon: Calendar,
  },
  {
    title: "时间段",
    key: "timePeriod",
    icon: AlarmClock,
  },
]);
const dataList = ref([
  {
    name: [
      { name: "追加模式", id: 0 },
      { name: "插播模式", id: 1 },
      { name: "替换模式", id: 2 },
    ],
  },
  {
    date: [
      { id: 1, name: "周一" },
      { id: 2, name: "周二" },
      { id: 3, name: "周三" },
      { id: 4, name: "周四" },
      { id: 5, name: "周五" },
      { id: 6, name: "周六" },
      { id: 7, name: "周日" },
    ],
  },
  {
    effectiveTime: "",
    endTime: "",
  },
  {
    timePeriod: [
      {
        timePeriodStart: null,
        timePeriodEnd: null,
      },
    ],
  },
]);

const onAddTimePeriod = (data: any) => {
  const obj = { timePeriodStart: "", timePeriodEnd: "" };
  data.timePeriod.push(obj);
};
const onDeletTimePeriod = (data: any, index: number | string) => {
  data.timePeriod.splice(index, 1);
};
var add = ref(0);
// 交集点击事件
const checkbox = () => {
  if (checkedIntersection.value) {
    add.value = 0;
  } else {
    add.value = 1;
  }
};
// 播放模式选中
const changeClick = (id: any) => {
  modes.value = id;
};
// 循环时间选中
const changeClicks = (e: any[]) => {
  const selectedIds = e.map((value: string) => {
    // 将选中的复选框的 label 值转换为对应的 id 值
    if (value === "周一") {
      return 1;
    } else if (value === "周二") {
      return 2;
    } else if (value === "周三") {
      return 3;
    } else if (value === "周四") {
      return 4;
    } else if (value === "周五") {
      return 5;
    } else if (value === "周六") {
      return 6;
    } else if (value === "周日") {
      return 7;
    }
  });
  selectWeeks.value = selectedIds;
};

// 表格选中
const clectClick = (val: any) => {
  let list = JSON.parse(JSON.stringify(val));
  id.value = list.map((a: { id: any }) => a.id);
};
// 设备分页加
const openclick = (val: any) => {
  devicePagesd();
};
// 设备分页减
const current = (val: any) => {
  devicePagesd();
};
// 设备搜索
const inputClick = () => {
  addsEr();
};
// 一级地区列表数据
const getRegions = async () => {
  let { data } = await getEconomize();
  treeRegionData.value = convertData(data.data);
};
// 子级
const loadChildren = (node: any, resolve: Function) => {
  getSubordinateArea(node.data.value).then(({ data }) => {
    let res = convertData(data.data);
    res = res.map((r) => {
      if (node.level === 2) {
        r.hasChildren = false;
      }
      return r;
    });
    resolve(res);
  });
};
// 点击
const handleNodeClicks = (node: any) => {
  levelIds.value = node.levelId;
  ids.value = node.value;
};
// 设备分组列表
const gainGroupsd = async () => {
  let resilt = await gainGroups();
  treeData.value = convertDatad(resilt.data.data);
};
// 设备分页
const devicePagesd = async () => {
  let data = {
    pageNum: currentPage.value,
    keyword: firstSearch.value,
  };

  let res = await devicePages(data);
  totalPage.value = res.data.data.totalPages;
  tableList.value = res.data.data.content;
};
const { goodInfo } = useMainStore();
var listid = ref();
onMounted(() => {
  if (localStorage.getItem("list")) {
    let adds = JSON.parse(localStorage.getItem("list"));
    tableData.value.push(adds);
    tableData.value = tableData.value[0];
    programLists.value = tableData.value.map((e) => e.id);
  }
  if (localStorage.getItem("listid")) {
    listid.value = localStorage.getItem("listid");
    let ids = localStorage.getItem("listid");
    id.value = JSON.parse(ids);
  }

  getResolution();
  devicePagesd();
  gainGroupsd();
});
</script>

<style lang="scss" scoped>
.text-overflow {
  white-space: nowrap; /* 禁止文字换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号显示文本 */
}
.border {
  border: 2px solid blue;
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
.publish_box {
  width: 100%;
  height: calc(100vh - 100px);
  font-size: 14px;
}

.wrap_head {
  width: 100%;
  height: 64px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;

  &--title {
    font-weight: 500;

    .-name {
      color: #303233;
    }

    .-text {
      color: #8a8e92;
      margin-right: 6px;
    }
  }
}

.wrap_content {
  width: 100%;
  height: calc(70vh - 112px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: space-between;
  margin-top: 16px;
  overflow: hidden;
  box-sizing: border-box;

  &--equipment_left,
  &--equipment_right {
    width: 99%;
    height: 100%;
    border-radius: 8px;
    background-color: white;
  }

  &--equipment_left {
    padding: 20px;
    box-sizing: border-box;

    .--step_tips_title {
      align-items: flex-start;
      margin-top: 2px;

      :deep(.el-checkbox) {
        height: 14px;
      }
    }

    .-checked_label {
      color: #0daeff;
      margin-right: 4px;
    }

    .--step_tips_first {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 94%;
      border: 1px solid #ebeff3;
      border-radius: 4px;
      margin-top: 16px;

      &-left {
        width: 17%;
        height: 100%;
        text-align: center;
        border-right: 1px solid #f6f7f9;
        overflow: hidden;

        .equipment_type {
          height: 33.3%;
          line-height: 18px;
          background-color: #f6f7f9;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          color: #8a8e92;
          border-bottom: 1px solid #ebeff3;
          cursor: pointer;
          transition: color 0.3s;

          &:last-child {
            border-bottom-width: 0;
          }

          &:hover {
            color: #0daeff;
          }

          &.eqt_current {
            color: #0daeff;
          }
        }
      }

      &-right {
        width: 10%;
        height: 100%;

        .all_first {
          position: relative;
          box-sizing: border-box;

          &--head_search {
            padding: 16px;
          }

          .-pages {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -50px;

            :deep(.el-button--small) {
              --el-button-size: 32px;
            }

            .prev_val {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: row;
              width: 64px;
              height: 32px;
              border: 1px solid #dce0e6;
              text-align: center;
              border-radius: 4px;
              margin: 0 8px;
              box-sizing: border-box;
              font-size: 12px;
              color: #5e6369;
            }
          }
        }

        .tree_grouping {
          height: calc(70vh - 195px);
          padding: 14px 16px;
          overflow: auto;
          &.region {
            :deep(.el-tree-node__expand-icon) {
              display: none;
            }
          }

          .trIcon {
            color: var(--el-tree-expand-icon-color);
            font-size: 12px;
            margin-right: 6px;
            transform: rotate(0);
            transition: transform var(--el-transition-duration) ease-in-out;

            &.trExpanded {
              transform: rotate(90deg);
            }
          }
        }
      }
    }
  }

  &--equipment_right {
    margin-left: 10px;
    padding: 20px;
    overflow: hidden;

    .table_content {
      margin-top: 16px;

      .opera {
        cursor: pointer;
        color: #5e6369;
        transition: color 0.3s;

        :hover {
          color: #0daeff;
        }
      }
    }
  }
}

.wrap_plan {
  width: 100%;
  height: calc(30vh - 80px);
  border-radius: 8px;
  background-color: white;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  padding: 20px;

  &--table {
    width: 100%;
    height: 135px;
    margin-top: 16px;
    overflow-y: auto;

    th,
    td {
      border: 1px solid #dce0e6;
      padding: 7px 16px;
      height: 30px;
      line-height: 30px;
    }

    th {
      width: 1.2%;
      background-color: #f6f7f9;
      color: #5e6369;
      font-weight: 500;
    }

    td {
      width: 10%;
      background-color: #fff;
      color: #303233;
    }

    :deep(.el-input__wrapper) {
      box-shadow: none;
    }

    :deep(.el-date-editor) {
      width: 175px;
    }

    .flex_end {
      align-items: flex-end;
    }
  }
}
</style>
